<template>
  <div id="app">
    <el-row class="heightAll myIndex" style="min-width:1300px;">
      <el-col  class="heightAll indexLeft" style="width:110px;" >
        <div class="logo">
          <img src="../static/img/logo.png" >
        </div>
        <el-menu :default-active="this.$store.state.index" class="el-menu-vertical-demo myMenu" @open="handleOpen" @close="handleClose">
          <el-menu-item index="1">
            <router-link to="/operate" tag="div">
              <img class="icon menuIcon" :src="$store.state.index==1?'static/img/icon2/menu_hover_operation.png':'static/img/icon1/menu_operation.png'" alt="">
              <span>运营看板</span>
            </router-link>
          </el-menu-item>
          <el-menu-item index="2">
            <router-link to="/product/scenicSpot" tag="div">
              <img class="icon menuIcon" :src="$store.state.index==2?'static/img/icon2/menu_hover_product.png':'static/img/icon1/menu_product.png'" alt="">
              <span>产品</span>
            </router-link>
          </el-menu-item>
          <el-menu-item index="3">
            <router-link to="/goods/allGoods" tag="div">
              <img class="icon menuIcon" :src="$store.state.index==3?'static/img/icon2/menu_hover_goods.png':'static/img/icon1/menu_goods.png'" alt="">
              <span>订单</span>
            </router-link>
          </el-menu-item>
          <el-menu-item index="4">
            <router-link to="/coupons" tag="div">
              <img class="icon menuIcon" :src="$store.state.index==4?'static/img/icon2/menu_hover_card.png':'static/img/icon1/menu_card.png'" alt="">
              <span>优惠券</span>
            </router-link>
          </el-menu-item>
          <el-menu-item index="5">
            <router-link to="/evaluate" tag="div">
              <img class="icon menuIcon" :src="$store.state.index==5?'static/img/icon2/menu_hover_evaluate.png':'static/img/icon1/menu_evaluate.png'" alt="">
              <span>评价</span>
            </router-link>
          </el-menu-item>
          <el-menu-item index="6">
            <router-link to="/customer" tag="div">
              <img class="icon menuIcon" :src="$store.state.index==6?'static/img/icon2/menu_hover_customer.png':'static/img/icon1/menu_customer.png'" alt="">
              <span>客户</span>
            </router-link>
          </el-menu-item>
          <el-menu-item index="7">
            <router-link to="/merchants/merchantsSJ" tag="div">
              <img class="icon menuIcon" :src="$store.state.index==7?'static/img/icon2/menu_hover_merchants.png':'static/img/icon1/menu_merchants.png'" alt="">
              <span>商家</span>
            </router-link>
          </el-menu-item>
          <el-menu-item index="8">
            <router-link to="/statistical/deal/product" tag="div">
              <img class="icon menuIcon" :src="$store.state.index==8?'static/img/icon2/menu_hover_statistical.png':'static/img/icon1/menu_statistical.png'" alt="">
              <span>数据分析</span>
            </router-link>
          </el-menu-item>
          <el-menu-item index="10">
            <router-link to="/activity" tag="div">
              <img class="icon menuIcon" src="static/img/ic_yingxiao.png" alt="">
              <span>营销</span>
            </router-link>
          </el-menu-item>
          <el-menu-item index="9">
            <router-link to="/setting/setBack" tag="div">
              <img class="icon menuIcon" :src="$store.state.index==9?'static/img/icon2/menu_hover_setting.png':'static/img/icon1/menu_setting.png'" alt="">
              <span>系统设置</span>
            </router-link>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="22" class="heightAll relative indexRight" >
        <div class="userBox">
          <img class="userImg" src="static/img/user.png" alt="">
          <span>{{cityName}} | <span style="cursor:pointer;" @click="logOut">退出</span>  待办事项</span>
        </div>
        <router-view></router-view>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios"
export default {
  name: 'app',
  data (){
    return {
      index:'1',
      cityName:''
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    logOut:function (){
      window.location.href=this.$store.state.url+"/login";
    }
  },
  watch:{
    $route (to,from){
      console.log(to.path);
    }
  },
  created(){
      var url=this.$store.state.url;
      var that=this;
      //售卖渠道获取
       axios.get(url+'/v1/systemConfig/gets/shop',{
         params:{}
       }).then((res)=>{
         that.$store.dispatch('getShops',res.data.data)
         //localStorage.shops=JSON.stringify(res.data.data);
       }).catch((err)=>{
         console.log(err);
       })

      //OTA选项获取
       axios.get(url+'/v1/ota/gets',{
         params:{}
       }).then((res)=>{
         that.$store.dispatch('getOTA',res.data.data)
         //localStorage.OTA=JSON.stringify(res.data.data);
       }).catch((err)=>{
         console.log(err);
       })
       var cityId=getCookie('shopId');
       switch (cityId) {
         case '25223814983975311':
           that.cityName="琥珀亲子"
           break;
         case '25223814983975312':
           that.cityName="琥珀亲子上海"
           break;
         case '25223814983975313':
           that.cityName="琥珀亲子杭州"
           break;
         case '25223814983975314':
           that.cityName="琥珀周边游"
           break;
         case '25230627490039594':
           that.cityName="溜娃福利社"
           break;
         default:

       }
       //alert(getCookie('shopId'));
  }
}
function getCookie(name)
  {
  var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
  if(arr=document.cookie.match(reg))
  return unescape(arr[2]);
  else
  return null;
  }
</script>

<style lang="Sass">
*{margin: 0; padding: 0; font-size: 13px; }
h1{font-size: 30px; line-height: 100px;}
html,body{height: 100%;}
.myIndex{display: flex;}
.indexLeft{display: inline-block; flex: 0 0 110px;}
.indexRight{display: inline-block; flex:1;}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected{ color: #13CE66; }
#app {
  font-family:  "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%;

  .logo{height: 40px; line-height: 60px; background: #eee;}
  .titleList{ height: 80px; line-height: 80px; }
  .userBox{position: absolute;top: 10px; right: 20px; z-index: 2; font-size: 13px;}
  .userImg{width: 20px; height: 20px; margin-right: 10px; display: inline-block; vertical-align: top; margin-top: 0px;}
  .myMenu{
    span{display: inline-block; vertical-align: middle; height: 16px; line-height: 16px;}
    .menuIcon{display: inline-block; vertical-align: middle; }
    li{padding-left: 15px !important;}
    .el-menu-item{
      div{text-align: left;
        span{font-size: 13px;}
      }
    }
  }

  /***常用样式****/
  .el-tag--primary{ color: #13CE66; background: #EFF7F3;}
  .el-dialog--large{width: 1200px;}
  .el-menu{background: #fff;}
  .el-menu--horizontal.el-menu--dark .el-submenu .el-menu-item.is-active, .el-menu-item.is-active{color: #13CE66;}
  .el-checkbox__input.is-focus .el-checkbox__inner{border-color: #13CE66;}
  .el-checkbox__input.is-checked .el-checkbox__inner{background-color: #13CE66; border-color: #13CE66;}
  .text-icon{color: #13CE66; cursor: pointer; margin-left: 0; font-size: 12px; line-height: 12px; border: 1px solid #13CE66; border-radius: 4px; padding: 4px 5px 2px 5px; display: inline-block; vertical-align: top; height: auto;}
  .icon{width: 16px; height: 16px;}
  .green{color: #13CE66;}
  .black{color: #333;}
  .gray{color: #999999;}
  .red{color: #DE013C;}
  .bg-white{background: #fff;}
  .el-tabs__item.is-active{color: #13CE66;}
  .el-pager li.active{background: #13CE66; border-color:#13CE66;}
  .el-input__inner:focus{border-color: #13CE66;}
  .text-left{text-align: left;}
  .text-right{text-align: right;}
  .heightAll{height: 100%;}
  .text-small{font-size: 12px;}
  .el-dialog--small{width: 60%;}
  .check{
    .el-checkbox__inner{width: 14px; height: 14px;}
    .el-checkbox__inner::after{left: 3px; top:0px;}
    span{font-size: 12px;}
  }
  .el-radio__inner{width: 14px; height: 14px;}
  .el-radio__input.is-checked .el-radio__inner{background: #13CE66; border-color: #13CE66;}
  .el-checkbox__input.is-indeterminate .el-checkbox__inner{background: #13CE66; border-color: #13CE66;}

}

.heightAll{height: 100%;}
.relative{position: relative;}
.canvas1{width: 120px !important; height: 120px !important;}
.canvas2{width: 120px !important; height: 120px !important;}
</style>
